<template>
  <div class="password">
    <Nav v-if="showNav" :activeNav="activeNav" :navList="navList" />
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      class="form"
      label-width="120px"
    >
      <el-form-item label="用户名" prop="name">
        <p class="un">{{ userInfo.username }}</p>
      </el-form-item>
      <el-form-item label="旧密码" prop="password">
        <el-input
          v-model="ruleForm.password"
          placeholder="请输入旧密码"
          :type="psw['old'].passw"
        >
          <i
            slot="suffix"
            :class="psw['old'].icon"
            @click="showPass('old')"
          ></i>
        </el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input
          v-model="ruleForm.newPassword"
          placeholder="请输入新密码"
          :type="psw['new'].passw"
        >
          <i
            slot="suffix"
            :class="psw['new'].icon"
            @click="showPass('new')"
          ></i>
        </el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="againNewPassword">
        <el-input
          v-model="ruleForm.againNewPassword"
          placeholder="请再次输入新密码"
          :type="psw['againnew'].passw"
          @keyup.enter.native="submitForm('ruleForm')"
        >
          <i
            slot="suffix"
            :class="psw['againnew'].icon"
            @click="showPass('againnew')"
          ></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          :loading="loading"
          >确定修改</el-button
        >
        <el-button @click="resetForm('ruleForm')" style="width: 100px"
          >重 置</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { clearLoginInfo } from "@/utils/cleanLogin";
// import { RSAencrypt } from "@/utils/getRsaKey";
import { sm2encrypt } from '@/utils/smUtil'

export default {
  props: {
    showNav: {
      type: Boolean,
      default: true,
    },
  },
  inject: ["reload"],
  data() {
    const validOldPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入旧密码"));
        // } else if (value.length < 8) {
        //   callback(new Error("请输入正确的旧密码"));
      } else {
        callback();
      }
    };
    const validNewPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else if (value.length < 10) {
        callback(new Error("请输入不小于10位的密码"));
      } else if (
        !/^(?![A-Za-z0-9]+$)(?![a-z0-9\W]+$)(?![A-Za-z\W]+$)(?![A-Z0-9\W]+$)[a-zA-Z0-9\W]{10,}$/.test(
          value
        )
      ) {
        callback(new Error("密码必须包含大小写字母、数字和特殊符号"));
      } else {
        if (this.ruleForm.againNewPassword !== "") {
          this.$refs.ruleForm.validateField("againNewPassword");
        }
        callback();
      }
    };
    const validNewPassword2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      activeNav: "xx",
      navList: [
        {
          label: "修改密码",
          type: "xx",
        },
      ],
      userInfo: {},
      ruleForm: {
        password: "",
        newPassword: "",
        againNewPassword: "",
      },
      rules: {
        password: [{ validator: validOldPassword, trigger: "blur" }],
        newPassword: [{ validator: validNewPassword, trigger: "blur" }],
        againNewPassword: [{ validator: validNewPassword2, trigger: "blur" }],
      },
      psw: {
        old: {
          passw: "password",
          icon: "icon icon-biyan",
        },
        new: {
          passw: "password",
          icon: "icon icon-biyan",
        },
        againnew: {
          passw: "password",
          icon: "icon icon-biyan",
        },
      },
    };
  },
  created() {
    const userInfo = JSON.parse(localStorage.getItem("homeUserInfo"));
    this.userInfo = userInfo;
  },
  methods: {
    //密码的隐藏和显示
    showPass(key) {
      //点击图标是密码隐藏或显示
      if (this.psw[key].passw == "text") {
        this.psw[key].passw = "password";
        this.psw[key].icon = "icon icon-biyan";
      } else {
        this.psw[key].passw = "text";
        this.psw[key].icon = "icon icon-zhengyan";
      }
    },
    // 修改密码
    update() {
      this.loading = true;
      const dataForm = JSON.parse(JSON.stringify(this.ruleForm));
      dataForm.password = sm2encrypt(dataForm.password);
      dataForm.newPassword = sm2encrypt(dataForm.newPassword);
      dataForm.againNewPassword = sm2encrypt(dataForm.againNewPassword);
      this.$put(`${this.$Url.account.newPassword}`, dataForm)
        .then((data) => {
          this.loading = false;
          // console.log(data);
          this.$message({
            type: "success",
            message: "修改成功！",
          });
          // 修改密码后强制登出
          clearLoginInfo();
          this.$nextTick(() => {
            this.$router.replace({
              name: "Home",
            });
            location.reload();
          });
        })
        .catch(() => {
          this.loading = false;
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.update();
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  components: {
    Nav: () => import("../components/nav.vue"),
  },
};
</script>

<style lang="scss" scoped>
.el-button--primary {
    color: #FFF;
    background-color: $mainColor !important;
    border-color: $mainColor !important;
}
.el-button--primary:active,.el-button--primary:focus,.el-button--primary:hover{
  color: #FFF !important;
    background-color: $mainColor !important;
    border-color: $mainColor !important;
}
.el-button:focus, .el-button:hover {
    color: $mainColor;
    border-color: $mainColor;
    background-color: $hoverColor;
}
.password {
  .form {
    width: 600px;
    margin: 20px auto;
  }
  .un {
    color: $color19;
  }
  .icon {
    display: block;
    width: 25px;
    height: 25px;
    background-size: cover;
    margin-top: 6px;
  }
  .icon-zhengyan {
    background: url("../../../../assets/img/home/icon-zhengyan.svg") no-repeat;
  }
  .icon-biyan {
    background: url("../../../../assets/img/home/icon-biyan.svg") no-repeat;
  }
}
</style>
